import React, { Fragment } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import RootSiblings from 'react-native-root-siblings'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { DismissLoading, ShowLoading } from 'src/utils/ToastUtil'
/* redux */
import { Provider, connect } from 'react-redux'
import store from 'src/store'
import {
  DO_REQUEST_USERINFO_C_ACTION,
  DO_REQUEST_USERINFO_B_ACTION,
  UPDATE_USERINFO_ACTION
} from 'src/store/actions/userinfo'
import {
  DO_REQUEST_MAIN_PAGE_B_ACTION,
  INIT_MAIN_PAGE_B_ACTION
} from 'src/pageB/main/main-page/store/action'
import {
  DO_REQUEST_MAIN_PAGE_C_ACTION,
  INIT_MAIN_PAGE_C_ACTION
} from 'src/pageC/mine/mine-page/store/action'
import NavigationUtil from 'src/utils/NavigationUtil'
import { showModal } from 'src/utils/ModalUtil'

const mapActiontoProps = dispatch => ({
  doRequestMainPageB () {
    dispatch({
      type: DO_REQUEST_MAIN_PAGE_B_ACTION
    })
  },
  doRequestMainPageC () {
    dispatch({
      type: DO_REQUEST_MAIN_PAGE_C_ACTION
    })
  },
  updateUserInfo (payload) {
    dispatch(UPDATE_USERINFO_ACTION(payload))
  },
  doRequestUserInfoC (payload) {
    const promise = DO_REQUEST_USERINFO_C_ACTION(payload)
    dispatch(promise)
    return promise.payload
  },
  doRequestUserInfoB (payload) {
    const promise = DO_REQUEST_USERINFO_B_ACTION(payload)
    dispatch(promise)
    return promise.payload
  },
  initBMainCenterState () {
    dispatch({
      type: INIT_MAIN_PAGE_B_ACTION
    })
  },
  initCMainCenterState () {
    dispatch({
      type: INIT_MAIN_PAGE_C_ACTION
    })
  }
})

class SwitchRoleModal extends React.PureComponent {
  onConfirm = () => {
    const { closeModal, userId, doRequestUserInfoC, doRequestUserInfoB } = this.props
    closeModal(() => {
      let requests = []
      if (userId) {
        ShowLoading()
        const params = { userId }
        requests = [
          doRequestUserInfoC({ params }),
          doRequestUserInfoB({ params })
        ]
      }
      Promise.all(requests).finally(() => {
        const {
          role: oldRole,
          initBMainCenterState,
          initCMainCenterState,
          updateUserInfo
        } = this.props
        const role = oldRole === 'B' ? 'C' : 'B'
        updateUserInfo({
          role
        })
        initBMainCenterState()
        initCMainCenterState()
        DismissLoading()
        NavigationUtil.navigate(`${role}MainNavigator`)
      })
    })
  }

  render () {
    const { role } = this.props
    return (
      <Fragment>
        <View style={styles.container}>
          <Text style={styles.titleLabel}>切换身份</Text>
          {role === 'B' && (
            <Fragment>
              <CustomImage
                style={styles.roleImg}
                source={require('src//imgC/login/roleC.png')}
              />
              <Text style={styles.roleTxt}>我要求职</Text>
            </Fragment>
          )}
          {role === 'C' && (
            <Fragment>
              <CustomImage
                style={styles.roleImg}
                source={require('src//imgC/login/roleB.png')}
              />
              <Text style={styles.roleTxt}>我要招聘</Text>
            </Fragment>
          )}
          <CustomImage
            style={styles.checkImg}
            source={require('src//imgC/userinfo/job-nature-select.png')}
          />
          <CustomButton style={styles.confirmBtn} onPress={this.onConfirm}>
            <Text style={styles.confirmText}>{'确定'}</Text>
          </CustomButton>
        </View>
      </Fragment>
    )
  }
}

SwitchRoleModal.propTypes = {
  role: PropTypes.string // 目标角色
}
export const SwitchRoleModalConnected = connect(
  ({ userinfo }) => ({
    ...userinfo
  }),
  mapActiontoProps
)(SwitchRoleModal)

export function SwitchRole () {
  return showModal(
    function (props) {
      return <Provider store={store}>
        <SwitchRoleModalConnected {...props}/>
      </Provider>
    }
  )
}
const styles = StyleSheet.create({
  container: {
    width: ScaleS(363),
    marginBottom: ScaleS(6),
    backgroundColor: '#FFFFFF',
    borderRadius: ScaleS(12),
    alignSelf: 'center',
    alignItems: 'center'
  },
  titleLabel: {
    color: '#444444',
    marginTop: ScaleS(27),
    fontSize: ScaleT(24),
    lineHeight: ScaleS(33),
    fontWeight: '400'
  },
  roleImg: {
    marginTop: ScaleS(51)
  },
  roleTxt: {
    marginTop: ScaleS(18),
    color: '#444444',
    fontSize: ScaleT(18),
    lineHeight: ScaleS(28),
    fontWeight: '500'
  },
  checkImg: {
    marginTop: ScaleS(21)
  },
  confirmBtn: {
    marginTop: ScaleS(42),
    marginBottom: ScaleS(26),
    width: ScaleS(297),
    height: ScaleS(45),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000000',
    borderRadius: ScaleS(10)
  },
  confirmText: {
    color: '#FFFFFF',
    fontSize: ScaleT(15),
    fontWeight: '600'
  }
})
